<template>
  <div class="mt-picker-wrap mt-picker--{{disabled ? 'disabled' : 'inited'}}">
    <div
      class="mt-picker-trigger"
      @tap="onTrigger"
    >
      <block wx:if="{{!labeltext}}">
        <div class="mt-picker__init"><slot name="initial"></slot></div>
      </block>
      <block wx:else>
        <div class="mt-picker__content">
          <block wx:if="{{useSlot}}"><slot></slot></block>
          <block wx:else>{{labeltext}}</block>
        </div>
      </block>
      <div class="mt-picker__action"></div>
    </div>

    <mt-popup
      show="{{ showPopup }}"
      position="bottom"
      overlay="{{ true }}"
      bind:clickoverlay="onClickOverlay"
    >
      <div class="u-flex u-aic u-jcsb mt-picker__control">
        <div class="mt-picker__btn mt-picker__cancel" @tap="onCancel">取消</div>
        <div class="mt-picker__btn mt-picker__confirm" @tap="onConfirm">确定</div>
      </div>
      <van-datetime-picker
        show-toolbar="{{false}}"
        type="year-month"
        value="{{ currentDate }}"
        bind:change="onChange"></van-datetime-picker>
    </mt-popup>
  </div>
</template>

<script>
  const liveBehavior = require('../../behaviors/live.behavior')

  function isEmpty(value) {
    return !value || value.length < 1 || value[0] < 0
  }

  export default {
    behaviors: [
      'wx://form-field',
      liveBehavior
    ],
    relations: {
      '../mt-liveform/index': {
        type: 'ancestor', // 关联的目标节点应为祖先节点
      },
    },
    properties: {
      indicatorStyle: {
        type: String,
        value: 'height: 50px;'
      },
      pickerStyle: {
        type: String,
        value: 'width: 100%; height: 200px;'
      },
      useSlot: {
        type: Boolean,
        value: false,
      },
      disabled: {
        type: Boolean,
        value: false,
      },
      currentDate: {
        type: null,
        value: new Date().getTime()
      },
      minDate: {
        type: null,
        value: new Date().getTime()
      },
    },
    data() {
      return {
        inner_columns: [],
        inner_value: [],
        tmp_value: 0,
        showPopup: false,
        labeltext: ''
      }
    },
    methods: {
      onTrigger(e) {
        if (!this.data.disabled) {
          this.setData({
            showPopup: true
          })
        }
      },
      onClickOverlay(e) {
        this.setData({
          inner_value: this.data.inner_value,
        })
        wx.nextTick(() => {
          this.setData({
            showPopup: false
          })
        })
      },
      onCancel(e) {
        this.setData({
          inner_value: this.data.inner_value,
        })
        wx.nextTick(() => {
          this.setData({
            showPopup: false
          })
        })
      },
      onConfirm(e) {
        if (this.data.tmp_value) {
          console.d('confirm')
          this.setData({
            inner_value: this.data.tmp_value,
            showPopup: false,
            labeltext: new Date(this.data.tmp_value).auiFormat('yy-m-d')
          })
          this.fireChange(this.data.tmp_value)
        } else {
          if (isEmpty(this.data.inner_value)) {
            this.setData({
              tmp_value: 0,
              inner_value: 0,
              labeltext: '',
              showPopup: false
            })
            this.fireChange(0)
          }
        }
      },
      fireChange(newVal) {
        this.mtLiveCall(newVal)
        this.$native.emit('change', {
          value: newVal
        })
      },
      onChange(e) {
        this.setData({
          tmp_value: e.detail.value
        })
      }
    }
  }
</script>

<style lang="less">
</style>
